<template>
  <div>

	<myheader></myheader>
	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">	
			<Avatar :src='file_url' :width='150' fit='fill'></Avatar>
			<!-- 视频控件 -->
			<video id="video" width="500" height="300" :src="file_url"
                 controls="controls" autoplay="autoplay" loop="loop">
            您的浏览器不支持video标签
          	</video>
			<br>
			选择上传文件<input type="file" @change="upload">
			<br>
			{{ imgload }}
			七牛云上传<input type="file" @change="upload_qiniu">
			<br>
			修改密码：<input type="password" v-model="password">
			<br>
			<Button color="blue" @click="submit">提交</Button>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
// 组件包含
import myheader from './myheader'
import myfooter from './myfooter'
export default {
  data () {
    return {
		// 面包屑导航
		datas: [{title:'首页',route:{name:'index'}},{title:'我的主页'}],
		// 文件地址
		file_url: '',
		// 原始路径
		mysrc: '',
		uptoken: '',
		// 进度展示
		imgload: '',
		password: ''
    }
  },
  // 定义组件
  components:{
	  'myheader': myheader,
	  'myfooter': myfooter,
  },
  mounted:function(){
	  //获取用户信息
      this.get_userinfo();

	  // 获取密钥
	  this.get_token();
  },

  methods:{
	get_userinfo: function () {
		this.axios.get('http://127.0.0.1:8000/userinfo/',
		{params:{
			uid: localStorage.getItem('uid'),
		}
		}).then((result) =>{
			console.log(result);
			this.file_url = 'http://127.0.0.1:8000/static/upload/' + result.data.img;
		})
	},
	
	// 提交用户修改
	submit:function() {
		// 发送请求
		 this.axios.get('http://127.0.0.1:8000/updateuser/',
		 {params:{
			 uid: localStorage.getItem('uid'),
			 img: this.mysrc,
			 password: this.password
			}}).then((result) => {
			console.log(result);
			
			this.$Message(result.data.message);	  
		})
	},

	// 上传七牛云
	upload_qiniu: function (e) {
		
		// 声明文件对象
		let file = e.target.files[0];
		// 声明参数类型
		let param = new FormData();
		// 添加文件
		param.append('file', file);
		param.append('token', this.uptoken);

		// 定制axios请求
		const axios_qiniu = this.axios.create({withCredentials:false});

		axios_qiniu({
			method:'POST',
			url:'http://up-z1.qiniu.com/',
			data:param,
			timeout:30000,
			// 上传进度捕捉方法 下载进度：onDownload
			onUploadProgress:(e) => {
				// 计算进度
				var complete = (e.loaded / e.total);

				// 判断
				if(complete < 1){
					this.imgload = (complete * 100).toFixed(2) + '%';
				} 
			}
		}).then(result => {
			console.log(result);
			// 请求结束设置为100%
			this.imgload = '100%';
		})
	},
	
	// 获取令牌方法
	get_token(){
		//发送异步请求
        this.axios.get('http://127.0.0.1:8000/uptoken/')
          .then((result) => {
			console.log(result);
			// 动态赋值
			this.uptoken =  result.data.uptoken;	  
		})
	},
	// 上传方法
	upload: function(e) {
		// 声明文件对象
		let file = e.target.files[0];
		// 声明参数类型
		let param = new FormData();
		
		// 添加文件
        param.append('file', file);
        // 声明上传文件头部信息
		let config = {'Content-Type': 'multipart/form-data'};
		
		//发送异步请求
        this.axios.post('http://127.0.0.1:8000/uploadfile/', param, config)
          .then((result) => {
			console.log(result);
			// 动态赋值
			this.file_url = 'http://127.0.0.1:8000/static/upload/' + result.data.filename;
			this.mysrc = result.data.filename;
	}	  
	)}  
  }
}


</script>
 
<style>



</style>